import React from 'react';
import { Router, Route, hashHistory } from 'react-router';
import Input from 'antd/lib/input'
import DatePicker from 'antd/lib/date-picker'
import Button from 'antd/lib/button'
import Header from '../components/header/header'
import Page from '../components/page/page'
import Photo from '../components/photo/photo'
import News from '../components/news/news'
import Music from '../components/music/music'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

import 'antd/dist/antd.css'

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
    }
  }
  handleChange = (e) => {
    this.setState({
      name: e.target.value,
    });
  };

  pageEnter(){
    console.log('Entering...')
  }
  render() {
    return <div>
      <h1>Hey, there! {this.state.name}</h1>
      <Input onChange={this.handleChange} />
      <Button>Search...</Button>
      <Header />
      <Router history={hashHistory}>
        <div>
          <Route exact path='/' component={Page}/>
          <Route exact path='/page' component={Page}/>
          <Route exact path='/photo' component={Photo}/>
          <Route exact path='/news' component={News}/>
          <Route exact path='/music' component={Music}/>
        </div>
      </Router>
      <div>
        <AddTodo />
        <VisibleTodoList />
      </div>

    </div>
  }
}
